import React from 'react';
import { Row, Col , Modal , Tabs , message , Form , Input , Button , CheckBox , Menu, Icon } from 'antd';

const SubMenu = Menu.SubMenu;
const TabPane = Tabs.TabPane;
const FormItem = Form.Item;
const MenuItemGroup = Menu.ItemGroup;
class PcHeader extends React.Component {
  constructor() {
    super();
    this.state = {
      current: 'top',
      modal1Visible: false,
      action: 'login',
      hasLogined: false,
      username: '',
      userId: 0
    }
  };

  setModal1Visible(value) {
    this.setState({
      modal1Visible : value
    })
  }

  handleClick(e){

    if (e.key == 'register') {
      this.setState({
        current: 'register'
      })
      this.setModal1Visible(true);
    } else {
      this.setState({
        current: e.key
      })
    }
  }

  handleSubmit(e){

  }

  render(){
    let { getFieldDecorator } = this.props.form;
    const userShow = this.state.hasLogined
    ?
    <Menu.Item key='logout' class='regisiter'>
      <Button type='primary' htmlType='button'>{this.state.username}</Button>
        &nbsp;&nbsp;
        <Link target='_blank'>
          <Button type='dashed' htmlType='button'>个人中心</Button>
        </Link>
        &nbsp;&nbsp;
        <Link target='_blank'>
          <Button type='ghost' htmlType='button'>退出</Button>
        </Link>
    </Menu.Item>
    :
    <Menu.Item key='register' class='regisiter'>
      <Icon type="smile-o" />注册/登录
    </Menu.Item>
    return (
      <header>
        <Col span={1}></Col>
        <Col span={5}>
          <a href='/' class='logo'>
            <img class="logo_pic" src='./src/images/header_news_512*512.png' alt='logo' />
            <span class='logo_title'>DjkloopNews</span>
          </a>
        </Col>
        <Col span={16}>
          <Menu
            mode="horizontal"
            theme='light'
            selectedKeys={[this.state.current]}
            onClick={this.handleClick.bind(this)}
          >
            <Menu.Item key="top">
              <Icon type="bars" />头条
            </Menu.Item>
            <Menu.Item key="shehui">
              <Icon type="minus-square-o" />社会
            </Menu.Item>
            <Menu.Item key="guonei">
              <Icon type="line-chart" />国内
            </Menu.Item>
            <Menu.Item key="guoji">
              <Icon type="exception" />国际
            </Menu.Item>
            <Menu.Item key="yule">
              <Icon type="laptop" />娱乐
            </Menu.Item>
            <Menu.Item key="tiyu">
              <Icon type="customer-service" />体育
            </Menu.Item>
            <Menu.Item key='keji'>
              <Icon type="desktop" />科技
            </Menu.Item>
            <Menu.Item key='shishang'>
              <Icon type="heart" />时尚
            </Menu.Item>
            {userShow}
          </Menu>
          <Modal
          title='UserLogin or UserRegister'
          wrapClassName="vertical-center-modal"
          visible={this.state.modal1Visible}
          onCancel={() => this.setModal1Visible(false)}
          onOk={() => this.setModal1Visible(false)}
          okText="Close"
          cancelText="Cancel"
          >
            <Tabs type='card'>
              <TabPane tab='regisiter' key='2'>
                <Form horizontal onSubmit={this.handleSubmit.bind(this)}>
                  <FormItem label='account'>
                    <Input placeholder='please enter your accout' {...getFieldDecorator('r_username')} />
                  </FormItem>
                  <FormItem label='password'>
                    <Input type='password' placeholder='please enter your password' {...getFieldDecorator('r_password')} />
                  </FormItem>
                  <FormItem label='confirmpassword'>
                    <Input type='password' placeholder='please again enter your password' {...getFieldDecorator('r_confpassword')} />
                  </FormItem>
                  <Button type='primary' htmlType='submit'>Regisiter</Button>
                </Form>
              </TabPane>
            </Tabs>
          </Modal>
        </Col>
        <Col span={1}></Col>
      </header>
    )
  };
}
//要进行二次封装
export default PcHeader = Form.create({})(PcHeader);
